<template>
  <transition name="fade">
    <div class="pop-layer">
      <div class="pop-wrap">
        <div class="pop-head">
          <span>{{ title }}</span>
          <el-tooltip effect="dark" content="关闭" placement="top-start">
            <em><i class="el-icon-close" @click="closeAction" /></em>
          </el-tooltip>
        </div>
        <div class="pop-content">
          <slot />
        </div>
        <div class="pop-foot" v-if="mode != 'detail'">
          <el-button type="primary" size="mini" style="float:right" @click="clickHandle">保存</el-button>
          <el-button size="mini" class="fr mr-15" @click="closeAction">取消</el-button>
        </div>
        <div class="pop-foot" v-if="mode == 'detail'">
          <el-button type="primary" size="mini" style="float:right" @click="closeAction">确定</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '弹窗标题'
			},
			mode: {
				type: String,
				default: 'add'
			}
		},
		data() {
			return {

			}
		},
		methods: {
			clickHandle() {
				// console.log(this.mode)
				if (this.mode === 'add') {
					this.$emit('addHandle')
				}
				if (this.mode === 'edit') {
					this.$emit('updateHandle')
				}
			},
			closeAction() {
				this.$emit('close')
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang='scss' scoped>
	.edit-input ::v-deep .el-input__inner {
		background: #f6f6f6 !important;
	}

	.edit-input ::v-deep .el-range-input {
		background: #f6f6f6 !important;
	}

	.edit-input ::v-deep .el-textarea__inner {
		background: #f6f6f6 !important;
	}

	.edit-input ::v-deep .el-form-item__error {
		padding-top: 12px !important;
	}

	.pop-layer {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 200;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.pop-wrap {
		position: absolute;
		left: calc(50% - 460px);
		top: 10%;
		padding: 10px 20px;
		width: 920px;
		background-color: #fff;
		border-radius: 10px;

		.pop-head {
			width: 100%;
			height: 35px;
			line-height: 35px;
			border-bottom: 1px solid #eee;

			span {
				font-size: 14px;
				font-weight: bold;
				color: #666666;
				border-left: 3px solid #409eff;
				padding-left: 10px;
			}

			em {
				float: right;
				font-size: 18px;
				color: #93969c;
				cursor: pointer;
				transition: all 0.2s linear;

				&:hover {
					color: #333;
				}

				;
			}
		}

		.pop-content {
			position: relative;
			width: 100%;
			margin: 15px 0;
			max-height: calc(80vh - 105px);
			overflow-x: hidden;
			overflow-y: auto;
			padding-right: 10px;
		}

		.pop-foot {
			width: 100%;
			height: 40px;
		}
	}
</style>
